
.container{


    width: 500px;
    height: 400px;
    border: 1px solid gainsboro;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); /* 通过平移将其居中 */
    border-radius: 5px 5px 5px 5px;
}

.login-from {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%); /* 通过平移将其居中 */
   
  }

  .from-content{

    position: relative;
    top: 10px;

  }

  .btn-login{

    width: 300px;
    margin-top: 0px;

  }

  .login-desc{
    position: relative;
    top: 0px;
    width: 100%;
    height: 40px;
    
  }
  .check-login{
    position: relative;
    left: -10px;

  }
  .check-pwd{

    position: relative;
    left: -30px;

  }
  .login-gpwd {

    position: relative;
    right: -30px;

  }

  .login-reg{

    position: absolute;
    bottom:-60px;
    left: 100px;
    width: 100px;

  }

.login-avatar {
  width: 100%;
  height: 160px;
  /* 设置多色渐变背景 */
  background: linear-gradient(135deg, #2a7dff, #70a5ff, #d3e7ff, #ff78e8, #2a7dff,#70a5ff); /* 添加彩色渐变 */
  
  /* 可选：设置圆角边框，使外观更加平滑 */
  border-radius: 5px;  /* 圆角效果，根据需求可以调整 */
}

  

  .btn-up{
    width: 30px;
    height: 40px;
    border: solid 1px rebeccapurple;
  }

  .img-container {
    width: 120px;
    height: 120px; /* 修改为正方形，以便图片完全对齐 */
    border-radius: 50%; /* 设置为圆形 */
    border: 1px solid gainsboro;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中容器 */
    overflow: hidden; /* 隐藏溢出的部分 */
  }
  
  .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 使图片填充并裁剪到容器的形状 */
  }

  .btn-regis{

    width: 330px;
    
  }